<template>
	<view class="loginBox">
		<view style="width: 80%; padding-bottom: 100px;">
			<uni-forms ref="customForm" :rules="customRules" :modelValue="customFormData" label-position="top">
				<uni-forms-item label="账号" required name="username">
					<uni-easyinput v-model="customFormData.username" placeholder="请输入账号" />
				</uni-forms-item>
				<uni-forms-item label="密码" required name="password">
					<uni-easyinput v-model="customFormData.password" type="password" placeholder="请输入密码" />
				</uni-forms-item>
				<uni-forms-item label="验证码" required name="code" class="codeBox">
					<uni-easyinput v-model="customFormData.code" placeholder="请输入验证码" />
					<img :src="codeUrl" @click="getCode" class="login-code-img" v-if="captchaEnabled" />
				</uni-forms-item>


			</uni-forms>
			<button type="primary" @click="submit('customForm')">登录</button>
		</view>
	</view>
</template>

<script>
	import {
		getCodeImg,
		login,
		getInfo
	} from "@/api/login";
	export default {
		data() {
			return {
				captchaEnabled: true, // 验证码开关
				codeUrl: null,
				// 自定义表单数据
				customFormData: {
					username: '',
					password: '',
					code: '',
					uuid: '',
				},
				// 自定义表单校验规则
				customRules: {
					username: {
						rules: [{
							required: true,
							errorMessage: '账号不能为空'
						}]
					},
					password: {
						rules: [{
							required: true,
							errorMessage: '密码不能为空'
						}]
					},
					code: {
						rules: [{
							required: true,
							errorMessage: '验证码不能为空'
						}]
					}
				},
			}
		},
		computed: {},
		mounted() {
			var a = document.getElementsByClassName('uni-page-head-hd')[0]
			a.style.display = 'none';
		},
		onLoad(options) {
			
		},
		onReady() {
			// 设置自定义表单校验规则，必须在节点渲染完毕后执行
			this.$refs.customForm.setRules(this.customRules)
		},
		created() {
			this.getCode();
		},
		methods: {
			getCode() {
				getCodeImg().then(res => {
					this.captchaEnabled = res.captchaEnabled === undefined ? true : res.captchaEnabled
					if (this.captchaEnabled) {
						this.codeUrl = "data:image/gif;base64," + res.img;
						this.customFormData.uuid = res.uuid;
					}
				})
			},
			submit(ref) {
				this.$refs[ref].validate().then(resVali => {
					login(this.customFormData).then(res => {
						console.log('success', res);
						//登录信息设置到本地
						uni.setStorageSync('token', res.token)
						this.getUserData() // 请求用户信息
					}).catch(err => {
						console.log('登录错误', err);
						this.getCode();
					})
				}).catch(err => {
					console.log('err', err);
				})
			},
			// 请求用户信息
			getUserData(){
				getInfo().then((res) => {
					uni.setStorageSync('loginUser', res)
					uni.reLaunch({ url: '/pages/index/index' })
				})
			}
		}
	}
</script>


<style scoped>
	.loginBox {
		height: calc(100vh - 44px);
		background-color: #fff;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.codeBox{
		position: relative;
	}
	.codeBox img{
		position: absolute;
		right: 0;
		bottom: 0;
		height: 37px;
	}
</style>